<template>
  <div class="page-article"  v-if="model">
    <div class="d-flex py-3 px-2 border-bottom">
      <div @click="$router.back(-1)" class=" text-blue">◀</div>
      <strong class="flex-1 text-overflow text-blue pl-2">{{model.title}}</strong>
      <div class="text-grey fx-xs ">{{model.createdAt | date}}</div>
    </div>
    <div class="article px-3 fs-xl" v-html="model.body"></div>
    <div class="px-3 border-top py-2">
      <div class="d-flex ai-center">
        <i class="sprite sprite-news"></i>
        <strong class="text-blue fs-lg ml-1">相关资讯</strong>
      </div>
      <div class="pt-2 fs-lg">
        <router-link class="py-2" tag="div" :to="`/articles/${item._id}`" v-for="item in model.related" :key="item._id">
          {{item.title}}
        </router-link>
      </div>
      
    </div>
  </div> 
</template>


<script>
import dayjs from 'dayjs'
export default {
  filters:{
    date(val){
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  props:{
    id:{required:true}
  },
  data(){
    return{
      model:null
    }
  },
  methods:{
    async fetch(){
      const res = await this.$http.get(`articles/${this.id}`)
      this.model = res.data
    }
  },
  created(){
    this.fetch()
  },
  watch:{
    id(){
      this.fetch()
    }
  }
}
</script>

<style lang="scss">
.article{
  img{
    width: auto;
    max-width: 100%;
    height: auto;
  };
  iframe{
    width: 100%;
    height: auto;
  }
}
</style>